<template>
    <div>
        <el-table :data="customers" stripe border style="width: 100%">
            <el-table-column
                prop="_id"
                label="用户编号"
                width="250"
            ></el-table-column>
            <el-table-column prop="name" label="用户姓名"></el-table-column>
            <el-table-column prop="password" label="用户密码"></el-table-column>
            <el-table-column prop="phone" label="用户电话"></el-table-column>
            <!-- <el-table-column prop="classesId.name" label="用户产品"> -->
            <!-- </el-table-column> -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="delCustomers(scope.row._id)">删除</el-button>
                    <el-button size="mini" @click="saveCustomer(scope.row)">修改</el-button>
                    <el-dialog title="修改数据" :visible.sync="dialogFormVisible">
                        <el-form :model="customer">
                            <el-form-item label="客户姓名" :label-width="formLabelWidth">
                                <el-input v-model="customer.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="客户id" :label-width="formLabelWidth">
                                <el-input v-model="customer._id" autocomplete="off" readonly></el-input>
                            </el-form-item>
                            <el-form-item label="客户帐号" :label-width="formLabelWidth">
                                <el-input v-model="customer.account" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="客户密码" :label-width="formLabelWidth">
                                <el-input type="password" v-model="customer.password" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="客户手机" :label-width="formLabelWidth">
                                <el-input v-model="customer.phone" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="sureAlter(scope.row)">确 定</el-button>
                        </div>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("customers");
export default {
    data() {
      return {
        dialogFormVisible: false,
        formLabelWidth: '120px',
        customer:{}
      };
    },
    created() {
        this.getCustomersBySalesmansId({
            salesmansId: localStorage.salesmansId,
        });
    },
    watch:{},
    methods: {
        ...mapActions(["getCustomersBySalesmansId", "deleteCustomers","sureAlterCustomers"]),
        delCustomers(_id) {
            this.deleteCustomers(_id);
            this.getCustomersBySalesmansId({
                salesmansId: localStorage.salesmansId,
            });
        },
        open() {
            this.$alert(``, "修改数据", {
                dangerouslyUseHTMLString: true,
            });
        },
        saveCustomer(data){
            this.customer = data;
            this.dialogFormVisible = true
        },
        sureAlter(data){
            this.sureAlterCustomers(data)
            this.dialogFormVisible = false;
        }
    },
    computed: {
        ...mapState(["customers"]),
    },
};
</script>

<style>
.cell{
    text-align: center;
}
</style>